<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: flex">
        <el-form-item label="作业时间">
          <el-date-picker v-model="datapicker" type="daterange" align="right" unlink-panels clearable
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="条件">
          <el-button type="primary" @click="submitSearchModel">分析</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div>
        <div id="myChart" style="border: 1px solid black;width:97%;height:500px">
        </div>
        <div id="myChart2" style="border: 1px solid black;width:97%;height:500px">
        </div>
        <div id="myChart3" style="border: 1px solid black;width:97%;height:500px">
        </div>
        <div id="myChart4" style="border: 1px solid black;width:97%;height:500px">
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  
  import echarts from 'echarts'
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/pie')
  require('echarts/lib/chart/line')
  export default {
    data() {
      return {
        searchModel: {

        }
      }
    },
    mounted() {
      this.drawLine();
      this.drawLine2();
      this.drawLine3();
      this.drawLine4();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '按井型统计作业井数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['生产井', '探井', '调整井']
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{
                value: 635,
                name: '生产井'
              },
              {
                value: 310,
                name: '探井'
              },
              {
                value: 234,
                name: '调整井'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        });
      },
      drawLine2() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart.setOption({
        title: {
            text: '作业公司按井型统计作业井数',
            left: 'center'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['生产井', '探井', '调整井']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '川东钻探',
              type: 'bar',
              barGap: 0,
              data: [320, 332, 301]
            },
            {
              name: '川西钻探',
              type: 'bar',
              data: [220, 182, 191]
            },
            {
              name: '长庆钻探',
              type: 'bar',
              data: [150, 232, 201]
            },
            {
              name: '井下作业公司',
              type: 'bar',
               data: [98, 77, 101]
            }
          ]
        });
      },
     drawLine3() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart3'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '按井别统计作业井数',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直井', '定向井', '水平井']
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{
                value: 435,
                name: '直井'
              },
              {
                value: 310,
                name: '定向井'
              },
              {
                value: 34,
                name: '水平井'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        });
      },
      drawLine4() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart4'))
        // 绘制图表
        myChart.setOption({
        title: {
            text: '作业公司按井别统计作业井数',
            left: 'center'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['直井', '定向井', '水平井']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '川东钻探',
              type: 'bar',
              barGap: 0,
              data: [220, 132, 301]
            },
            {
              name: '川西钻探',
              type: 'bar',
              data: [420, 82, 191]
            },
            {
              name: '长庆钻探',
              type: 'bar',
              data: [150, 132, 201]
            },
            {
              name: '井下作业公司',
              type: 'bar',
               data: [98, 77, 101]
            }
          ]
        });
      }
    }
  }
</script>